<template>
  <div class="box">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="明细" name="first">
        <el-row>
          <el-col :span="24">
            <div class="header">
              <el-form
                ref="mxForm"
                :model="mxForm"
                label-width="100px"
                class="flex-start"
              >
                <el-form-item label="单号">
                  <el-input
                    v-model="mxForm.transportCode"
                    placeholder="请输入单号"
                    style="width: 286px"
                  ></el-input>
                </el-form-item>
                <el-form-item label="所属网点">
                  <el-select
                    v-model="mxForm.networkNameId"
                    placeholder="请选择活动区域"
                    style="width: 286px"
                  >
                    <el-option
                      v-for="item in networkList"
                      :key="item.id"
                      :label="item.networkName"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="业务日期" style="width: 600px">
                  <el-date-picker
                    v-model="Time"
                    type="daterange"
                    range-separator="至"
                    @change="mxDateChange"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="getList">查询</el-button>
                  <el-button @click="mxClear">重置</el-button>
                </el-form-item>
                <el-form-item label="面单类型">
                  <el-select
                    v-model="mxForm.sheetType"
                    placeholder="请选择面单类型"
                    style="width: 286px"
                  >
                    <el-option label="丰巢面单费" value="丰巢面单费"></el-option>
                    <el-option label="惠惠商家寄面单费" value="惠惠商家寄面单费"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="结算类型">
                  <el-select
                    v-model="mxForm.settleType"
                    placeholder="请选择结算类型"
                    style="width: 286px"
                  >
                    <el-option label="业务员" value="业务员"></el-option>
                    <el-option label="客户" value="客户"></el-option>
                    <el-option label="承包区" value="承包区"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="结算对象">
                 <el-input
                    v-model="mxForm.settleObject"
                    placeholder="请输入请选择结算对象"
                    style="width: 286px"
                  ></el-input>
                 
                </el-form-item>
              </el-form>
            </div>
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-between">
          <el-col :span="6">
            <div>当前页共{{mxTotal}}项</div>
          </el-col>
          <
        </el-row>
        <el-row>
          <el-col :span="24">
            <div>
              <el-table
                ref="mxTableData"
                :data="mxTableData"
                :cell-style="{ textAlign: 'center' }"
                :header-cell-style="{ textAlign: 'center' }"
                tooltip-effect="dark"
                style="width: 100%"
              >
                <el-table-column label="序号" type="index" >
                </el-table-column>
                <el-table-column
                  prop="settleObject"
                  label="结算对象"
                >
                </el-table-column>
                <el-table-column
                  prop="orderCustomer"
                  label="订单客户"
                >
                </el-table-column>
                <el-table-column
                  prop="printPeople"
                  label="面单发放对象/打单员"
                >
                </el-table-column>
                <el-table-column prop="sheetFee" label="面单费">
                </el-table-column>
                <el-table-column
                  prop="advancePaymentMoney"
                  label="预付款已收金额"
                >
                </el-table-column>
                <el-table-column
                  prop="advancePaymentType"
                  label="预付款状态"
                >
                </el-table-column>
                <el-table-column label="操作" >
                  <template slot-scope="scope">
                    <el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-col>
        </el-row>
        <div class="block" style="display: flex; justify-content: end">
          <el-pagination
            @size-change="mxHandleSizeChange"
            @current-change="mxHandleCurrentChange"
            :current-page="currentPage1"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="mxTotal"
          >
          </el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="汇总" name="second">
        <el-row>
          <el-col :span="24">
            <div class="header">
              <el-form
                ref="hzForm"
                :model="hzForm"
                label-width="100px"
                class="flex-start"
              >
                
                <el-form-item label="所属网点">
                  <el-select
                    v-model="hzForm.networkNameId"
                    placeholder="请选择活动区域"
                    style="width: 286px"
                  >
                    <el-option
                      v-for="item in networkList"
                      :key="item.id"
                      :label="item.networkName"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
                 <el-form-item label="汇总维度">
                      <el-select
                        v-model="hzForm.collectDimensionality"
                        placeholder="请选择汇总维度"
                        @change="handleDimensionalityChange"
                        style="width: 286px"
                      >
                        <el-option label="月汇总" value="2"></el-option>
                        <el-option label="日汇总" value="1"></el-option>
                      </el-select>
                    </el-form-item>

                    <el-form-item label="时间范围">

                      <el-date-picker
                        v-model="month"
                        type="monthrange"
                        placeholder="选择月"
                        range-separator="至"
                        v-show="show == 2"
                        @change="hzMonthChange"
                        style="width: 672px"
                        start-placeholder="开始月份"
                        end-placeholder="结束月份"
                      >
                      </el-date-picker>

                      <el-date-picker
                        v-model="Time"
                        value-format="yyyy-MM-dd"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        @change="hzDateChange"
                        v-show="show == 1"
                        style="width: 672px"
                      >
                      </el-date-picker>
                    </el-form-item>
                    <el-form-item >
                  <el-button type="primary" @click="getHzList">查询</el-button>
                  <el-button @click="hzClear">重置</el-button>
                </el-form-item>
                <el-form-item label="面单类型">
                  <el-select
                    v-model="hzForm.sheetType"
                    placeholder="请选择面单类型"
                    style="width: 286px"
                  >
                    <el-option label="丰巢面单费" value="丰巢面单费"></el-option>
                    <el-option label="惠惠商家寄面单费" value="惠惠商家寄面单费"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="结算类型">
                  <el-select
                    v-model="hzForm.settleType"
                    placeholder="请选择结算类型"
                    style="width: 286px"
                  >
                      <el-option label="业务员" value="业务员"></el-option>
                    <el-option label="客户" value="客户"></el-option>
                    <el-option label="承包区" value="承包区"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="结算对象">
                  <el-input
                    v-model="hzForm.settleObject"
                    placeholder="请输入请选择结算对象"
                    style="width: 286px"
                  ></el-input>
                </el-form-item>
              
              </el-form>
            </div>
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-between">
          <el-col :span="6">
            <div>当前页共{{hzTotal}}项</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div>
              <el-table
                ref="hzTableData"
                :data="hzTableData"
                  :cell-style="{ textAlign: 'center' }"
                :header-cell-style="{ textAlign: 'center' }"
                tooltip-effect="dark"
                style="width: 100%"
              >
               <el-table-column label="序号" type="index" >
                </el-table-column>
                <el-table-column prop="collectTime" label="统计时间" >
                </el-table-column>
                <el-table-column
                  prop="sheetType"
                  label="面单类型"
                >
                </el-table-column>
                <el-table-column prop="settleType" label="结算类型" >
                </el-table-column>
                <el-table-column prop="settleObject" label="结算对象" >
                </el-table-column>
                <el-table-column prop="sheetFee" label="面单费" >
                </el-table-column>
                <el-table-column prop="advancePaymentMoney" label="预付款已收金额" >
                </el-table-column>
               
              </el-table>
            </div>
          </el-col>
        </el-row>
        <div class="block" style="display: flex; justify-content: end">
          <el-pagination
            @size-change="hzHandleSizeChange"
            @current-change="hzHandleCurrentChange"
            :current-page="currentPage2"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="hzTotal"
          >
          </el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>
      <el-dialog
      title="编辑"
      :visible.sync="dialogVisible"
      width="30%"
    >

      <!-- 明细 -->
      <el-form ref="editMxForm" v-if="activeName == 'first'" :model="editMxForm" label-width="80px">
        <el-form-item label="结算类型">
                  <el-select
                    v-model="editMxForm.settleType"
                    placeholder="请选择所属业务员"
                    style="width: 286px"
                  >
                    <el-option label="业务员" value="业务员"></el-option>
                    <el-option label="客户" value="客户"></el-option>
                    <el-option label="承包区" value="承包区"></el-option>
                  </el-select>
                </el-form-item>
        <el-form-item label="结算对象">
            <el-input v-model="editMxForm.settleObject" disabled></el-input>
        </el-form-item>
        <el-form-item label="面单费(元)">
             <el-input v-model="editMxForm.sheetFee" type="number" placeholder="只能输入数字"></el-input>
        </el-form-item>
      </el-form>


      


      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editTrue"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getOutletsList, feeFillCollectSearch,updateFeeFillCollect,feeFillCollectList } from "@/api/dashboard";
export default {
  data() {
    return {
      activeName: "first",
      mxForm: {
        networkNameId: "",
        transportCode: "",
        startTime: "",
        endTime: "",
        sheetType: "",
        settleType: "",
        settleObject: "",
        pageDate: {
          pageNum: 1,
          pageSize: 10,
        },
      },
      show: 1,

      hzForm: {
        networkNameId: "",
        collectDimensionality: "1",
        startMonth: "",
        endMonth: "",
        startTime: "",
        endTime: "",
        sheetType: "",
        settleType: "",
        settleObject: "",
        pageDate: {
          pageNum: 1,
          pageSize: 10,
        },
      },
      editMxForm:{
        sheetFee:'',
        settleType:'',
      },
      currentPage1:1,
      currentPage2:1,
      mxTotal:0,
      hzTotal:0,
      mxTableData: [],
      hzTableData: [],
      networkList: [],
     month:"",
      Time: "",
      dialogVisible:false,
    };
  },
  created() {
    this.getOutLet();
     this.getYesterdayDate();
    this.getList();
  },
  methods: {
    // 获取网点列表
    getOutLet() {
      getOutletsList().then((res) => {
        if (res.code == 200) {
          this.networkList = res.data;
           if (this.networkList.length > 0) {
            this.mxForm.networkNameId = this.networkList[0].id;
          }
        }
      });
    },
    // 汇总列表
    getHzList(){
       for (const key in this.hzForm) {
        // Check if the value is empty (assuming empty means falsy in this context)
        if (!this.hzForm[key]) {
          // If the value is empty, delete the key from mxForm
          delete this.hzForm[key];
        }
      }
      feeFillCollectList(this.hzForm).then((res) => {
        if (res.code == 200) {
          this.hzTableData = res.data.data;
          this.hzTotal = res.data.total;
          this.hzForm.pageDate.pageNum = res.data.pages;
        }
      });

    },
    // 修改明细
    edit(data) {
        this.editMxForm.settleObject = data.settleObject
        this.editMxForm.sheetFee = data.sheetFee
        this.editMxForm.settleType = data.settleType
        this.editMxForm.id =  data.id


      this.dialogVisible = true;
    },
    // 确认修改
    editTrue(){
        if (this.activeName == 'first') {
            this.editMxTrue()
        } else if (this.activeName == 'second') {
            this.editHzTrue()
        } 
    },
    // 明细确认修改
    editMxTrue(){
        const ff = {
            settleObject: this.editMxForm.settleObject,
            sheetFee:this.editMxForm.sheetFee,
            id: this.editMxForm.id
        }
        updateFeeFillCollect(ff).then((res) => {
        if (res.code == 200) {
            this.$message({
          message: '修改成功',
          type: 'success'
        });
           this.dialogVisible = false
           this.getList()
        }
      });
    },
    // 明细重置
    mxClear(){
      for (const key in this.mxForm) {
        if (key === "pageDate") {
          // 重置 pageDate 的值为默认值
          this.mxForm[key] = { pageNum: 1, pageSize: 10 };
        } else {
          // 清空其他键
          this.mxForm[key] = "";
        }
      }
    },
     // 汇总重置
    hzClear(){
      for (const key in this.hzForm) {
        if (key === "pageDate") {
          // 重置 pageDate 的值为默认值
          this.hzForm[key] = { pageNum: 1, pageSize: 10 };
        } else {
          // 清空其他键
          this.hzForm[key] = "";
        }
      }
    },
    // 获取当前日期
    getYesterdayDate() {
      // 获取今天的日期
      const today = new Date();

      // 获取昨天的日期
      const yesterday = new Date(today);
      yesterday.setDate(today.getDate() - 1);

      const startDate = new Date(
        yesterday.getFullYear(),
        yesterday.getMonth(),
        yesterday.getDate(),
        0,
        0,
        0
      ); // 昨天的开始时间

      const endDate = new Date(
        yesterday.getFullYear(),
        yesterday.getMonth(),
        yesterday.getDate(),
        23,
        59,
        59
      ); // 昨天的结束时间

      // 设置时间范围选择器的默认时间范围为昨天
      this.Time = [startDate, endDate];

      this.mxForm.startTime = startDate;
      this.mxForm.endTime = endDate;
    },

    // 明细表格列表
    getList() {
      for (const key in this.mxForm) {
        // Check if the value is empty (assuming empty means falsy in this context)
        if (!this.mxForm[key]) {
          // If the value is empty, delete the key from mxForm
          delete this.mxForm[key];
        }
      }
      feeFillCollectSearch(this.mxForm).then((res) => {
        if (res.code == 200) {
          this.mxTableData = res.data.data;
          this.mxTotal = res.data.total;
          this.mxForm.pageDate.pageNum = res.data.pages;
        }
      });
    },
   
    handleClick(tab, event) {
      if (tab.name == "second") {
        this.getHzList()
        this.month = "";
      } else {
        this.getList()
      }
    },
    // 网点月份转换
    hzMonthChange(value) {
      const [startDateString, endDateString] = value;
      const startDate = new Date(startDateString);
      const endDate = new Date(endDateString);

      // 获取年份和月份
      const startYear = startDate.getFullYear();
      const startMonth = startDate.getMonth() + 1; // 月份是从 0 到 11 表示的，因此需要加 1

      const endYear = endDate.getFullYear();
      const endMonth = endDate.getMonth() + 1; // 月份是从 0 到 11 表示的，因此需要加 1

      // 格式化成 "YYYY-MM" 的形式
      const formattedStartMonth = `${startYear}-${
        (startMonth < 10 ? "0" : "") + startMonth
      }`;
      const formattedEndMonth = `${endYear}-${
        (endMonth < 10 ? "0" : "") + endMonth
      }`;
      this.hzForm.startMonth = formattedStartMonth;
      this.hzForm.endMonth = formattedEndMonth;
    },
     // 承包日期根据月.日切换时间选择
    handleDimensionalityChange(newVal) {
      console.log(newVal);
      if (newVal == 1) {
        this.show = 1;
        this.hzForm.month = "";
      } else {
        this.show = 2;
        this.hzForm.startTime = "";
        this.hzForm.endTime = "";
      }
    },
    // 日期转换
    mxDateChange(value) {
      this.mxForm.startTime = value[0];
      this.mxForm.endTime = value[1];
    },
     // 汇总日期转换
    hzDateChange(value) {
      this.hzForm.startTime = value[0];
      this.hzForm.endTime = value[1];
    },
     mxHandleSizeChange(val) {
      this.mxForm.pageDate.pageSize = val;
      this.getList();

      console.log(`每页 ${val} 条`);
    },
    mxHandleCurrentChange(val) {
      this.mxForm.pageDate.pageNum = val;
      this.getList();
      console.log(`当前页: ${val}`);
    },
     hzHandleSizeChange(val) {
      this.hzForm.pageDate.pageSize = val;
      this.getHzList();

      console.log(`每页 ${val} 条`);
    },
    hzHandleCurrentChange(val) {
      this.hzForm.pageDate.pageNum = val;
      this.getHzList();
      console.log(`当前页: ${val}`);
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  padding: 20px;
}

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-start {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}

.header {
  padding-bottom: 20px;
  border-bottom: 1px solid #ccc;
}

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
